<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>教师评教</title>
    <link rel="stylesheet" href="../../css/mdui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        label {
            width: 100%;
        }
    </style>
</head>

<body id="main-body" class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-color-grey-50">

    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 一个通知按钮 -->
                <a href="../Personal/notice.html">
                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                            <i class="mdui-icon material-icons">notifications</i>
                        </span>
                </a>

                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-menu="{target: '#login-menu'}">
                        <i class="mdui-icon material-icons">account_circle</i>
                    </span>
                <!-- 小菜单 -->
                <ul class="mdui-menu mdui-menu-cascade mdui-menu-cascade-custom" id="login-menu">
                    <li class="mdui-menu-item">
                        <div class="mdui-row mdui-valign">
                            <div class="mdui-col-md-3 mdui-m-l-3">
                                <div class="user-head-img mdui-img-circle" style="background: url(../../images/touxiang1.jpg);"></div>
                            </div>
                            <div class="mdui-col-md-7 mdui-typo">
                                <div>姓名：刘同学</div>
                                <div>学号：16851154</div>
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider"></li>
                    <li class="mdui-menu-item">
                        <a href="../Personal/notice.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">notifications_none</i>我的通知
                        </a>
                        <a href="../Personal/message.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">chat_bubble_outline</i>我的留言
                        </a>
                        <a href="../Personal/setting.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">settings</i>设置
                        </a>
                        <a href="../../login.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">exit_to_app</i>登出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->


    <!-- 页头介绍 -->
    <content>
        <div class="mdui-container mdui-m-t-2">
            <div class="mdui-row">
                <div class="mdui-typo mdui-text-center mdui-p-t-1">
                    <h3>教师评教列表</h3>
                </div>
            </div>
        </div>
    </content>

    <!-- 教师卡片列表 -->
    <content>
        <div class="mdui-container">
            <!-- 卡片开始 -->
            <div id="teacher-main-card" class="mdui-row">
                <!-- 教师卡片一 -->
                <div class="mdui-col-sm-7 mdui-col-md-4 mdui-m-t-2">
                    <div class="mdui-card">
                        <div class="mdui-card-media mdui-ripple">
                            <img src="../../images/teaching-card-1.png" />
                            <div class="mdui-card-menu">
                                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">chat</i></button>
                            </div>
                        </div>
                        <div class="mdui-card-primary">
                            <img class="mdui-card-header-avatar" src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar1.jpg" />
                            <div id="teacher-name-1" class="mdui-card-header-title">田老师</div>
                            <div class="mdui-card-header-subtitle">所属院系：计算机科学与技术</div>
                        </div>
                        <!-- <div class="mdui-card-content"></div> -->
                        <div class="mdui-card-actions">
                            <button id="teacher-card-1" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input'}"><i class="mdui-icon material-icons">date_range</i> 评教</button>
                            <button id="teacher-card-niming-1" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input-niming'}"><i class="mdui-icon material-icons">bubble_chart</i> 匿名评教</button>
                            <button class="mdui-btn mdui-btn-icon mdui-float-right" mdui-menu="{position: 'top', covered: 'false', align: 'right', target: '#t-c-1'}">
                                    <i class="mdui-icon material-icons">keyboard_arrow_up</i>
                            </button>
                            <ul class="mdui-menu" id="t-c-1">
                                <li class="mdui-menu-item">
                                    <a href="javascript:;" class="mdui-ripple">私聊</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 教师卡片二 -->
                <div class="mdui-col-sm-7 mdui-col-md-4 mdui-m-t-2">
                    <div class="mdui-card">
                        <div class="mdui-card-media mdui-ripple">
                            <img src="../../images/teaching-card-2.png" />
                            <div class="mdui-card-menu">
                                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">chat</i></button>
                            </div>
                        </div>
                        <div class="mdui-card-primary">
                            <img class="mdui-card-header-avatar" src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar2.jpg" />
                            <div id="teacher-name-2" class="mdui-card-header-title">李老师</div>
                            <div class="mdui-card-header-subtitle">所属院系：计算机科学与技术</div>
                        </div>
                        <!-- <div class="mdui-card-content"></div> -->
                        <div class="mdui-card-actions">
                            <button id="teacher-card-2" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input'}"><i class="mdui-icon material-icons">date_range</i> 评教</button>
                            <button id="teacher-card-niming-2" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input-niming'}"><i class="mdui-icon material-icons">bubble_chart</i> 匿名评教</button>
                            <button class="mdui-btn mdui-btn-icon mdui-float-right" mdui-menu="{position: 'top', covered: 'false', align: 'right', target: '#t-c-2'}">
                                        <i class="mdui-icon material-icons">keyboard_arrow_up</i>
                                </button>
                            <ul class="mdui-menu" id="t-c-2">
                                <li class="mdui-menu-item">
                                    <a href="javascript:;" class="mdui-ripple">私聊</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 教师卡片三 -->
                <div class="mdui-col-sm-7 mdui-col-md-4 mdui-m-t-2">
                    <div class="mdui-card">
                        <div class="mdui-card-media mdui-ripple">
                            <img src="../../images/teaching-card-3.png" />
                            <div class="mdui-card-menu">
                                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">chat</i></button>
                            </div>
                        </div>
                        <div class="mdui-card-primary">
                            <img class="mdui-card-header-avatar" src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar3.jpg" />
                            <div id="teacher-name-3" class="mdui-card-header-title">王老师</div>
                            <div class="mdui-card-header-subtitle">所属院系：计算机科学与技术</div>
                        </div>
                        <!-- <div class="mdui-card-content"></div> -->
                        <div class="mdui-card-actions">
                            <button id="teacher-card-3" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input'}"><i class="mdui-icon material-icons">date_range</i> 评教</button>
                            <button id="teacher-card-niming-3" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input-niming'}"><i class="mdui-icon material-icons">bubble_chart</i> 匿名评教</button>
                            <button class="mdui-btn mdui-btn-icon mdui-float-right" mdui-menu="{position: 'top', covered: 'false', align: 'right', target: '#t-c-3'}">
                                            <i class="mdui-icon material-icons">keyboard_arrow_up</i>
                                    </button>
                            <ul class="mdui-menu" id="t-c-3">
                                <li class="mdui-menu-item">
                                    <a href="javascript:;" class="mdui-ripple">私聊</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 教师卡片四 -->
                <div class="mdui-col-sm-7 mdui-col-md-4 mdui-m-t-2">
                    <div class="mdui-card">
                        <div class="mdui-card-media mdui-ripple">
                            <img src="../../images/teaching-card-4.png" />
                            <div class="mdui-card-menu">
                                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">chat</i></button>
                            </div>
                        </div>
                        <div class="mdui-card-primary">
                            <img class="mdui-card-header-avatar" src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar4.jpg" />
                            <div id="teacher-name-4" class="mdui-card-header-title">张老师</div>
                            <div class="mdui-card-header-subtitle">所属院系：计算机科学与技术</div>
                        </div>
                        <!-- <div class="mdui-card-content"></div> -->
                        <div class="mdui-card-actions">
                            <button id="teacher-card-4" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input'}"><i class="mdui-icon material-icons">date_range</i> 评教</button>
                            <button id="teacher-card-niming-4" class="mdui-btn mdui-ripple" mdui-dialog="{modal: 'true', target: '#teaching-input-niming'}"><i class="mdui-icon material-icons">bubble_chart</i> 匿名评教</button>
                            <button class="mdui-btn mdui-btn-icon mdui-float-right" mdui-menu="{position: 'top', covered: 'false', align: 'right', target: '#t-c-4'}">
                                            <i class="mdui-icon material-icons">keyboard_arrow_up</i>
                                    </button>
                            <ul class="mdui-menu" id="t-c-4">
                                <li class="mdui-menu-item">
                                    <a href="javascript:;" class="mdui-ripple">私聊</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 评教填写菜单 -->
            <div class="mdui-dialog" id="teaching-input">
                <div id="teaching-input-title" class="mdui-dialog-title">评教 - </div>
                <div class="mdui-dialog-content">
                    <!-- 选择列表 -->
                    <form action="">
                        <div class="mdui-typo">
                            <ul class="mdui-list mdui-container-fluid">
                                <div class="mdui-list-item-title">
                                    <strong>1. 对老师整体的教学评价。</strong>
                                </div>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>满意</label>
                                </li>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>较满意</label>
                                </li>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>一般</label>
                                </li>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>不满意</label>
                                </li>
                                <div class="mdui-divider"></div>
                                <div class="mdui-list-item-title">
                                    <strong>2. 请填写评价。（少于200字）</strong>
                                </div>
                                <div class="mdui-textfield mdui-textfield-floating-label">
                                    <label class="mdui-textfield-label">请输入评价</label>
                                    <textarea class="mdui-textfield-input" maxlength="200"></textarea>
                                </div>
                            </ul>
                        </div>
                    </form>
                </div>
                <div class="mdui-dialog-actions">
                    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>提交</button>
                    <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                </div>
            </div>

            <!-- 匿名评教填写菜单 -->
            <div class="mdui-dialog" id="teaching-input-niming">
                <div id="teaching-input-title-niming" class="mdui-dialog-title">匿名评教 - </div>
                <div class="mdui-dialog-content">
                    <form action="">
                        <div class="mdui-typo">
                            <ul class="mdui-list mdui-container-fluid">
                                <div class="mdui-list-item-title">
                                    <strong>1. 对老师整体的教学评价。</strong>
                                </div>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>满意</label>
                                </li>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>较满意</label>
                                </li>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>一般</label>
                                </li>
                                <li class="mdui-list-item mdui-ripple">
                                    <label class="mdui-radio"><input type="radio" name="group6"/><i class="mdui-radio-icon"></i>不满意</label>
                                </li>
                                <div class="mdui-divider"></div>
                                <div class="mdui-list-item-title">
                                    <strong>2. 请填写评价。（少于200字）</strong>
                                </div>
                                <div class="mdui-textfield mdui-textfield-floating-label">
                                    <label class="mdui-textfield-label">请输入评价</label>
                                    <textarea class="mdui-textfield-input" maxlength="200"></textarea>
                                </div>
                            </ul>
                        </div>
                    </form>
                </div>

                <div class="mdui-dialog-actions">
                    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>提交</button>
                    <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                </div>
            </div>
            <!-- 卡片结束 -->
        </div>
    </content>

    <!-- 左侧侧边栏 -->
    <aside>
        <!-- 抽屉栏 -->
        <nav class="mdui-drawer mdui-drawer-open " id="left-drawer">
            <ul id="mdui-menu-left-list" mdui-collapse="{accordion: true}" class="mdui-list">
                <a href="../index.html">
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">home</i>
                        <div class=" mdui-list-item-content "> 首页 </div>
                    </li>
                </a>
                <a href="../Homework/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">event_note</i>
                        <div class="mdui-list-item-content ">作业</div>
                    </li>
                </a>
                <a href="../Chat/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">comment</i>
                        <div class="mdui-list-item-content ">交流</div>
                    </li>
                </a>

                <a href="../Exercise/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">chrome_reader_mode</i>
                        <div class="mdui-list-item-content ">习题库</div>
                    </li>
                </a>
                <li class="mdui-subheader ">综合</li>

                <div class="mdui-collapse-item">
                    <li class="mdui-collapse-item-header mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">cloud_download</i>
                        <div class="mdui-list-item-content ">资料下载</div>
                        <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                    </li>
                    <div class="mdui-collapse-item-body mdui-list">
                        <a href="../Datadownload/recommend.html" class="mdui-list-item mdui-ripple ">优秀实验报告</a>
                        <a href="../Datadownload/report.html" class="mdui-list-item mdui-ripple ">实验报告</a>
                        <a href="../Datadownload/courseware.html" class="mdui-list-item mdui-ripple ">课件资料</a>
                    </div>
                </div>

                <a href="../Teaching/index.html">
                    <li class="mdui-list-item mdui-ripple mdui-list-item-active">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">contacts</i>
                        <div class="mdui-list-item-content ">教师评教</div>
                    </li>
                </a>
                <a href="../Answer/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-yellow-600">insert_chart</i>
                        <div class="mdui-list-item-content ">疑难点解析</div>
                    </li>
                </a>

            </ul>
        </nav>
    </aside>


    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="../../js/mdui.js"></script>
    <script>
        var $$ = mdui.JQ;
        var inst = new mdui.Dialog('#teaching-input');
        $$('#teacher-card-4').on('click', function(e) {
            var name4 = $$('#teacher-name-4').text();
            $$('#teaching-input-title').append('<b>' + name4 + '</b>');
        });
        $$('#teacher-card-3').on('click', function(e) {
            var name3 = $$('#teacher-name-3').text();
            $$('#teaching-input-title').append('<b>' + name3 + '</b>');
        });
        $$('#teacher-card-2').on('click', function(e) {
            var name2 = $$('#teacher-name-2').text();
            $$('#teaching-input-title').append('<b>' + name2 + '</b>');
        });
        $$('#teacher-card-1').on('click', function(e) {
            var name1 = $$('#teacher-name-1').text();
            $$('#teaching-input-title').append('<b>' + name1 + '</b>');
        });
        $$('#teacher-card-niming-4').on('click', function(e) {
            var name4 = $$('#teacher-name-4').text();
            $$('#teaching-input-title-niming').append('<b>' + name4 + '</b>');
        });
        $$('#teacher-card-niming-3').on('click', function(e) {
            var name3 = $$('#teacher-name-3').text();
            $$('#teaching-input-title-niming').append('<b>' + name3 + '</b>');
        });
        $$('#teacher-card-niming-2').on('click', function(e) {
            var name2 = $$('#teacher-name-2').text();
            $$('#teaching-input-title-niming').append('<b>' + name2 + '</b>');
        });
        $$('#teacher-card-niming-1').on('click', function(e) {
            var name1 = $$('#teacher-name-1').text();
            $$('#teaching-input-title-niming').append('<b>' + name1 + '</b>');
        });
        $$('#teaching-input').on('opened.mdui.dialog', function() {
            inst.handleUpdate();
        });
        $$('#teaching-input').on('close.mdui.dialog', function() {
            $$('#teaching-input-title').replaceWith('<div id="teaching-input-title" class="mdui-dialog-title">评教 - </div>');
        });
        $$('#teaching-input-niming').on('opened.mdui.dialog', function() {
            inst.handleUpdate();
        });
        $$('#teaching-input-niming').on('close.mdui.dialog', function() {
            $$('#teaching-input-title-niming').replaceWith('<div id="teaching-input-title-niming" class="mdui-dialog-title">匿名评教 - </div>');
        });
    </script>
</body>

</html>